﻿
@{
    ViewData["Title"] = "StatementView";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;" id="jumpBtn">
    添加自定义权益
</button>
<table id="statementTable" lay-filter="statementTable">
    <tobdy>

    </tobdy>
</table>
<div type="text/html" id="StatementAdd" style="display:none;">
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">权益名称</label>
            <div class="layui-input-block">
                <input type="text" name="statementName" required lay-verify="required" placeholder="请输入权益名称" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权益图标</label>
            <div class="layui-input-block">
                    <input type="hidden" name="statementIcon" id="statementIcon" />
                    <img src="" id="icon" style="width:100px;height:100px;display:none;"   />
                <button class="layui-btn" style="background-color:white;color:#2589ff;border:1px solid #2589ff; border-radius: 8px;" id="checkIcon">
                    选择图标
                </button>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">权益说明</label>
            <div class="layui-input-block">
                <textarea name="statementExplain" required lay-verify="required" placeholder="请输入权益说明" class="layui-textarea"></textarea>
            </div>
        </div>
    </form>
</div>
 @* 选择图标弹框 *@
<div type="text/html" id="iconSelect" style="display:none;">

    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body"> 
                <img src="~/image/chaoshijiaqian.png" class="icon-img" data-src="chaoshijiaqian.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">超时加钱</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/jiachuang.png"  data-src="jiachuang.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">加床</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/jiaoxingfuwu.png" data-src="jiaoxingfuwu.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">叫醒服务</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/liwu.png" data-src="liwu.png"  />
            </div>
            <div class="layui-card-body" style="text-align:center;">礼物</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/mianfeiyule.png" data-src="mianfeiyule.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">免费娱乐</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/mianyajin.png" data-src="mianyajin.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">免押金</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/shandiantuifang.png" data-src="shandiantuifang.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">闪电退房</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/shengji.png" data-src="shengji.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">升级</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/tingche.png"  data-src="tingche.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">免费停车</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/xiaoye.png" data-src="xiaoye.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">免费宵夜</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/xiyi.png" data-src="xiyi.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">免费洗衣</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/yanchituifang.png" data-src="yanchituifang.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">延迟退房</div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                
                <img src="~/image/zaocan.png" data-src="zaocan.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">
                免费早餐
            </div>
        </div>
    </div>
    <div class="layui-col-md2">
        <div class="layui-card">
            <div class="layui-card-body">
                <img src="~/image/zhekou.png" data-src="zhekou.png" />
            </div>
            <div class="layui-card-body" style="text-align:center;">会员折扣</div>
        </div>
    </div>

</div>
<script type="text/html" id="bardemo">
    <a href="StatementRoleView?statementId={{d.statementId}}" class="layui-btn layui-btn-xs" lay-event="layui-btn-SettingRole"  >设置规则</a>
</script>
<script>
    layui.use(['table', 'jquery', 'layer', 'form', 'laypage', 'element'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        var layer = layui.layer;
        var laypage = layui.laypage;
        var element = layui.element;
        //显示会员权益信息
        GetStatements();
        function GetStatements() {
            $.ajax({
                url: 'http://localhost:5174/api/Statement/GetStatement',
                type: 'get',
                contentType: 'application/json',
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem('token')
                },
                async: true,
                success: function (data) {
                    console.log(data.data);
                    table.render({
                        elem: '#statementTable',
                        data: data.data,
                        //  toolbar: '#toolbarDemo',
                        cols: [[
                            { field: 'statementName', title: '权益名称', width: 200, templet: function (d) {
                                return d.statementName+'&emsp;&emsp;' + '<img src="' + d.statementIcon + '" style="width:30px;height:30px;">';
                            } },
                         
                            { field: 'statementExplain', title: '权益说明', align: 'center' },
                            { field: 'sort', title: '排序', align: 'center' },
                            { field: 'menberInfoModifted', title: '状态', align: 'center' },
                            { toolbar: '#bardemo', title: '操作', align: 'center' }
                        ]],
                        done: function (res, curr, count) {
                            // 选择客户信息列的单元格并设置高度
                            $('.layui-table-cell[field="Client"]').css('height', '60px');
                        },
                        //  page: true
                    });
                },
                error: function (xhr, status, error) {
                    console.log(xhr.responseText);
                }
            });
        }
        //点击按钮弹框显示添加权益信息
        $('#jumpBtn').on('click', function () {
            layer.open({
                type: 1,
                content: $('#StatementAdd'),
                area: ['600px', '400px'],
                btn: ['确认', '取消'],
                title: '添加自定义权益',
                shade: false, // 不显示遮罩
                yes: function (index, layero) {
                   var statementName = $('input[name="statementName"]').val();
                   var statementIcon = $('input[name="statementIcon"]').val();
                   var statementExplain = $('textarea[name="statementExplain"]').val();
                   if (statementName == '' || statementIcon == '' || statementExplain == '') {
                       layer.msg('请填写完整信息', { icon: 2, time: 1000 });
                       return false;
                   }
                   console.log(statementName);
                   console.log(statementIcon);
                   console.log(statementExplain);
                    $.ajax({
                        url: 'http://localhost:5174/api/Statement/AddStatement',
                        type: 'post',
                        contentType: "application/json",
                        data: JSON.stringify({
                            "statementName": statementName,
                            "statementIcon": statementIcon,
                            "statementExplain": statementExplain
                        }),
                        success: function (data) {
                            if (data.code > 0) {
                                layer.msg('添加成功', { icon: 1, time: 1000 });
                                GetStatements();
                            } 
                            else if(data.code==-1)
                            {
                                layer.msg('权益名称已存在', { icon: 2, time: 1000 });
                            }
                            else {
                                layer.msg(data.msg, { icon: 2, time: 1000 });
                            }

                            layer.close(index);
                        }
                    });
                    return false;
                    layer.close(index);
               },
               btn2: function (index, layero) {
                   layer.close(index);
               }

            });

        })   
       //点击按钮弹框显示权益图标
        $('#checkIcon').on('click', function () {
            layer.open({
                type: 1,
                content: $('#iconSelect'),
                area: ['600px', '400px'],
                btn: ['确认', '取消'],
                title: '选择图标',
                shade: false, // 不显示遮罩
               btn2: function (index, layero) {
                   layer.close(index);
               }
            })
        })

        //监听工具条  点击图片获取图片的src值并赋值给隐藏的input框
        $('#iconSelect').on('click', function (event) {
            if (event.target.tagName === 'IMG') {
                var selectedSrc = event.target.getAttribute('data-src');
                console.log(selectedSrc);
                // 将获取到的 src 赋值给相应的输入框或进行其他操作
                $('#statementIcon').val('http://localhost:5174/StatementImages/' + selectedSrc);
                $('#icon').attr('src', 'http://localhost:5174/StatementImages/' + selectedSrc);
                console.log($('#statementIcon').val('http://localhost:5174/StatementImages/' + selectedSrc));

               // layer.close(index);
            }
        });
    })
</script>


